<template>
  <ms-dialog
    ok-btn="配置"
    title="类配置"
    :dialog-visible="dialogVisible"
    @show="handleShowBaseForm"
    @ok="handleSaveBaseForm"
    @close="handleCloseDialog"
  >
    <el-form ref="formValid" label-width="80px" :model="form">
      <el-form-item label="模块包名" prop="packageName">
        <el-input v-model="form.packageName" />
      </el-form-item>
      <el-form-item label="类名" prop="className">
        <el-input v-model="form.className" />
      </el-form-item>
      <el-form-item label="查询主键" prop="searchId">
        <col-keys v-model="form.searchId" :form-id="formId" />
      </el-form-item>
      <el-form-item label="所属菜单" prop="menu">
        <treeselect
          v-model="form.menu"
          :normalizer="normalizer"
          :options="menuData"
          placeholder="请选择上级菜单"
        />
      </el-form-item>
      <el-form-item label="接口名" prop="apiName">
        <el-input v-model="form.apiName" />
      </el-form-item>
      <el-form-item label="作者姓名" prop="author">
        <el-input v-model="form.author" />
      </el-form-item>
    </el-form>
  </ms-dialog>
</template>

<script>
import MsDialog from '@/common/dialog'
import Treeselect from '@riophae/vue-treeselect'
import ColKeys from '@/views/common/ColKeys'

import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { getMenuTree } from '@/api/sys/menu'
import { getClassConf, saveClassConf } from '@/api/utils/genBaseConf'
export default {
  components: {
    Treeselect,
    MsDialog,
    ColKeys
  },
  props: ['dialogVisible', 'formId'],
  data() {
    return {
      form: {},
      menuData: [],
      keysSelect: []
    }
  },
  mounted() {
    getMenuTree().then(res => {
      this.menuData = [{ id: 0, label: '主菜单', children: [...res.obj] }]
    })
  },
  methods: {
    handleShowBaseForm() {
      getClassConf(this.formId).then((res) => {
        const { form = {}, tableKeys } = res.obj
        this.form = form
        this.keysSelect = tableKeys
      })
    },
    handleSaveBaseForm() {
      const saveForm = JSON.parse(JSON.stringify(this.form))
      saveForm.tableName = this.formId
      saveClassConf(saveForm).then((res) => {
        this.$notify({
          title: '配置成功',
          type: 'success',
          duration: 2500
        })
        this.handleCloseDialog()
      })
    },
    normalizer(node) {
      // 去掉children=[]的children属性
      if (node.children && !node.children.length) {
        delete node.children
      }
      return {
        id: node.id,
        label: node.label,
        children: node.children
      }
    },
    handleCloseDialog() {
      this.$emit('update:dialog-visible', false)
    }
  }
}
</script>
